<template>
  <div class="profile">
    <van-nav-bar title="个人中心" />
    
    <div class="user-info">
      <van-cell-group>
        <van-cell>
          <div class="user-avatar">
            <van-image
              round
              width="60px"
              height="60px"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="user-name">{{ userInfo.nickname }}</div>
          </div>
        </van-cell>
      </van-cell-group>
      
      <van-cell-group>
        <van-cell title="我的统计" is-link @click="goToStats">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title="阅读偏好" is-link @click="goToPreferences">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
      
      <van-cell-group>
        <van-cell title="我的图书" is-link @click="goToBooks">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title="阅读进度" is-link @click="goToProgress">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title="读书笔记" is-link @click="goToNotes">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
      
      <van-cell-group>
        <van-cell title="设置" is-link @click="goToSettings">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title="关于" is-link @click="goToAbout">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
      
      <div class="logout-button">
        <van-button
          round
          block
          type="danger"
          @click="logout"
        >
          退出登录
        </van-button>
      </div>
    </div>
    
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'Profile',
  setup() {
    const router = useRouter()
    const activeTab = ref(3)
    
    // 模拟用户信息
    const userInfo = ref({
      nickname: '张三',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
    })
    
    const goHome = () => {
      router.push('/')
    }
    
    const goToSearch = () => {
      router.push('/search')
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      // 当前页面就是个人中心
    }
    
    const goToStats = () => {
      Toast('我的统计')
    }
    
    const goToPreferences = () => {
      Toast('阅读偏好')
    }
    
    const goToBooks = () => {
      router.push('/books')
    }
    
    const goToProgress = () => {
      router.push('/progress')
    }
    
    const goToNotes = () => {
      router.push('/notes')
    }
    
    const goToSettings = () => {
      Toast('设置')
    }
    
    const goToAbout = () => {
      Toast('关于')
    }
    
    const logout = () => {
      // 模拟退出登录
      Toast.success('退出登录成功')
      router.push('/login')
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      activeTab,
      userInfo,
      goHome,
      goToSearch,
      goToAddBook,
      goToProfile,
      goToStats,
      goToPreferences,
      goToBooks,
      goToProgress,
      goToNotes,
      goToSettings,
      goToAbout,
      logout,
      onChangeTab
    }
  }
}
</script>

<style scoped>
.user-info {
  padding: 10px;
}

.user-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.user-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.logout-button {
  margin: 20px 10px;
}
</style>